<template>
        <div class="sider-two">
            <ul class="sider-two-ul">
            <router-link 
            class="sider-two-ul-li"
            tag="li"
             v-for="item of list" 
                 :key="item.id"
                :to="/home/+ item.path"
                 >
                 <span class="icon">11</span>
                 <span class="text">{{item.title}}</span>
                 </router-link>
                 
           <!-- <ul class="sider-ul">
               <li 
                 v-for="item of list" 
                 :key="item.id" 
                 
                 >
                 {{item.title}}
                 <router-view />
               </li>
           </ul> -->
          </ul> 
          <router-view />
        </div>
         
</template>

<script>
export default {
    name:'home',
    data(){
        return{
            list:[{
                
                title:'人力资源',
                path:'renli'
            },{
                
                title:'采购系统',
                path:'caigou'
            },{
               
                title:'库存系统',
                path:'kuchun'
            },{
               
                title:'生产管理',
                path:'shengcan'
            },{
                
                title:'销售系统',
                path:'xiaoshou'
            },{
               
                title:'外贸管理',
                path:'waimao'
            },{
                
                title:'财务管理',
                path:'caiwu'
            },{
               
                title:'资金管理',
                path:'zhijin'
            },{
               
                title:'售后服务',
                path:'shouhou'
            },{
                
                title:'智能系统',
                path:'zhineng'
            },{
                
                title:'数据分析',
                path:'shuju'
            }]
        }
    },
    created(){

    },
    methods:{
        
    }
    
}
</script>

<style lang="scss" scoped>
    .router-link-exact-active .router-link-active{
        color: red;
    }
	.sider-two{
        display: flex;
        width: 100%;
        &-ul{
            width:208px;
            border: 1px solid black;
            margin-right: 16px;
            background-color: #363439;
            display: flex;
            flex-direction: column;
           
            &-li{
                // height: 75px;
                height: 7.4%;
                border: 1px solid #312d2c;
              text-align: center;
              line-height: 55px;
                
            }
             &-li:hover{
                 background: #52514f;
             }
             .text{
            color: #dededc;
            }
        }
    }
</style>
